@charset "UTF-8"; /**
 * 
 * @authors Your Name (you@example.org)
 * @date    2017-03-07 17:39:10
 * @version $Id$
 */

/*头部样式开始*/
#wrapper {
  margin: 0 auto;
  width: 100%; /* 控制最外层的 div */
}

#header {
  width: 100%;
  height: 105px;
  background: url(../images/headerbg.png) repeat-x scroll 0 0 #fff;
}

#header .contWidth {
  position: relative;
  width: 990px;
  height: 105px;
  z-index: 100;
  margin: auto;
}

#header .logo {
  float: left;
  line-height: 80px;
  margin-left: 20px;
  color: #fff;
}

#header .search {
  position: absolute;
  left: 198px;
  top: 20px;
}

#inputSearch {
  border: 1px solid #BABEBF;
  color: #999999;
  font-size: 14px;
  height: 17px;
  padding: 3px 6px 5px 6px;
  width: 200px;
}
#inputSearch.focus {
  border: 1px solid #00A5FF;
}

/* 切换皮肤控件样式 */
#skin {
  display:inline;
  float: right;
  margin: 10px 30px 0 0;
  padding: 4px;
  width: 120px;
}

#skin li {
  float: left;
  display: inline;
  width: 15px;
  height: 15px;
  margin-right: 5px;
  text-indent: -9999px;
  overflow: hidden;
  background-image: url(../images/theme.gif);
  cursor: pointer;
}

#skin_0 { background-position:0px 0px; }
#skin_1 { background-position:15px 0px; }
#skin_2 { background-position:35px 0px; }
#skin_3 { background-position:55px 0px; }
#skin_4 { background-position:75px 0px; }
#skin_5 { background-position:95px 0px; }
#skin_0.selected { background-position:0px 15px; }
#skin_1.selected { background-position:15px 15px; }
#skin_2.selected { background-position:35px 15px; }
#skin_3.selected { background-position:55px 15px; }
#skin_4.selected { background-position:75px 15px; }
#skin_5.selected { background-position:95px 15px; }

/*导航样式*/
.mainNav {
  position: absolute;
  left: 0;
  top: 69px;
  width: 990px;
  height: 36px;
  line-height: 36px;
  z-index: 100;
  background-color: #4a4a4a;
}

.mainNav ul {
  display: inline;
  float: left;
  margin-left: 25px;
}
.mainNav li {
  float: left;
  display: inline;
  margin-right: 14px;
  position: relative;
  z-index: 100;
}

.mainNav li a {
  display: inline-block;
  padding: 0 8px;
  font-weight: bold;
  color: #fff;
  font-size: 14px;
}

/* 二级菜单 */
.jnNav {
  position: absolute;
  background: #fff;
  border: 1px solid #b1b1b1;
  border-top: 0;
  overflow: hidden;
  top: 36px;
  left: -1px;
  width: 474px;
  z-index: 1000;
  display: none;
}

.jnNav .subitem {
  float: left;
  height: auto !important;
  min-height: 100px;
  padding: 10px 12px;
  width: 450px;
}

.jnNav .subitem dl {
  float: left;
  border-top: 1px dashed #c4c4c4; 
  padding: 8px 0;
  overflow: hidden;
}

.jnNav .subitem dt {
  float: left;
  font-weight: bold;
  line-height: 16px;
  padding: 4px 3px;
  text-align: center;
  width: 76px;
}

.jnNav .subitem dt a {
  text-decoration: none;
  font-size: 12px;
  color: #000;
}

.jnNav .subitem dt a:hover {
  color: #E33437;
}

.jnNav .subitem dd {
  float: left; 
  overflow: hidden;
  padding: 0;
  width: 364px;
}

.jnNav .subitem dd em {
  display:inline;
  float: left;
  line-height: 16px;
  margin: 6px 3px 6px 0;
  border-right: 1px solid #D9D9D9;
}

.jnNav .subitem dd em a {
  font-size: 12px;
  color: #4a4a4a;
  font-weight: normal;
  text-decoration: none;
}

.jnNav .subitem dd em a:hover,.jnCatainfo ul li a:hover {
  color: #E33437;
}


/* 主体样式 */
#content {
  clear: left;
  width: 990px;
  position: relative;
  margin: 0 auto;
}

.janeshop {
  height: 560px;
  overflow: hidden;
  padding: 10px 0;
}

/* 商品分类 */

.jnCatalog {
  float: left;
  width: 188px;
  border: 1px solid #ccc;
  border-top: 0;
  height: 560px;
  overflow: hidden;
  margin-right: 10px;
}

.jnCatalog h2 {
  font-size: 12px;
  height: 30px;
  line-height: 30px;
  text-indent: 12px;
  background-color: #665F5F;
  color: #fff;
}

.jnCatainfo {
  height: 530px;
  width: 168px;
  padding: 5px 10px 0;
  overflow: hidden;
}

.jnCatainfo h3 {
  float: left;
  width: 168px;
  height: 24px;
  line-height: 24px;
  border-bottom: 1px solid #ccc;
}

.jnCatainfo ul {
  float: left;
  padding: 0 2px 8px;
}

.jnCatainfo ul li {
  float: left;
  width: 82px;
  height: 24px;
  line-height: 24px; 
  overflow: hidden;
}

.jnCatainfo ul li .promoted {
  color: #F9044E;
  padding-right: 21px;
  background: url(../images/hot.gif) no-repeat right -1px;
}

.jnCatainfo ul li a {
  color: #4a4a4a;
}

/* 大屏广告 */
.jnImageroll {
  float: left;
  position: relative;
  width: 550px;
  height: 321px;
  margin-right: 10px;
  overflow: hidden;
}

.jnImageroll img {
  position: absolute;
  top: 0;
  left: 0;
}

.jnImageroll div {
  position: absolute;
  bottom: 0;
  overflow: hidden;
  float: left;
}

.jnImageroll div a {
  float: left;
  display: inline-block;
  width: 79px;
  height: 32px;
  opacity: 0.8;
  filter: alpha(opacity=80); /* IE */
  background-color: #444;
  color: #fff;
  margin-right: 1px;
  padding: 5px 15px;
  text-align: center;
  overflow: hidden;
}

.jnImageroll div a:hover {
  text-decoration: none;
}

.jnImageroll div a em {
  cursor: pointer;
  display: block;
  height: 16px;
  overflow: hidden;
  width: 79px;
}

.jnImageroll .last {
  margin-right: 0;
  width: 80px;
}

.jnImageroll a.chos {
  background: url(../images/adindex.gif) no-repeat center 39px #37A7D7;
}

/* 最新动态 */
.jnNotice {
  float: left;
  width: 230px;
  height: 321px;
  overflow: hidden;
}

.jnMiaosha {
  float: left;
  height: 176px;
  width: 230px;
  overflow: hidden;
  margin-bottom: 10px;
}

.JS_css3 img {
  -webkit-transition:1s all;
  -moz-transition:1s all;
  -o-transition:1s all;
  transition:1s all;
}

.JS_css3:hover img {
  -webkit-transform:rotate(360deg);
  -moz-transform:rotate(360deg);
  -o-transform:rotate(360deg);
  transform:rotate(360deg);
}

.jnNoticeInfo {
  float: left;
  width: 228px;
  height: 133px;
  overflow: hidden;
  border: 1px solid #dfdfdf;
}

.jnNoticeInfo h2 {
  border-bottom: 1px solid #dfdfdf;
  height: 23px;
  line-height: 23px;
  text-indent: 12px;
}

.jnNoticeInfo ul {
  padding: 6px 2px 0 12px;
  float: left;
}

.jnNoticeInfo ul li {
  height: 20px;
  line-height: 20px;
  overflow: hidden;
}


.jnNoticeInfo ul li a {
  color: #666;
}

.jnNoticeInfo ul li a:hover {
  color: #0087DE;
  text-decoration: none;
}

/* 品牌活动 */

.jnBrand {
  float: left;
  margin-top: 10px;
  width: 790px;
  height: 230px;
  overflow: hidden;
}

.jnBrandTab {
  float: left;
  position: relative;
  width: 790px;
  height: 29px;
  border-bottom: 1px solid #dfdfdf;

}

.jnBrandTab h2 {
  position: absolute;
  left: 0;
  width: 100px;
  height: 29px;
  line-height: 29px;
}

.jnBrandTab ul {
  position: absolute;
  right: 0;
  top: 10px;
}

.jnBrandTab ul li {
  float: left;
  margin: 0 10px 0 0;
}

.jnBrandTab ul li a {
  background-color: #E4E4E4;
  color: #000;
  display: inline-block;
  height: 20px;
  line-height: 20px;
  padding: 0 10px;
  text-decoration: none;
}

.jnBrandTab .chos {
  background: url(../images/chos.gif) no-repeat center bottom transparent;
  padding-bottom: 3px;
}

.jnBrandTab .chos a {
  background-color: #FA5889;
  color: #fff;
  outline: 0 none;
}

.jnBrandContent {
  float: left;
  position: relative;
  width: 780px;
  height: 188px;
  overflow: hidden;
  margin: 8px 5px;
}

.jnBrandList {
  position: absolute;
  left: 0;
  top: 0;
  width: 3200px;
}

.jnBrandContent li {
  float: left;
  width: 185px;
  height: 188px;
  overflow: hidden;
  padding: 0 5px;
  position: relative;
}

.jnBrandContent li img {
  width: 183px;
  height: 164px;
  position: absolute;
  left: 5px;
  top: 0;
}

.jnBrandContent li span {
  position: absolute;
  display: block;
  bottom: 0;
  width: 183px;
  height: 24px;
  line-height: 24px;
  font-size: 14px;
  text-align: center;
  background-color: #efefef;
  overflow: hidden;
}

.jnBrandContent li a {
  color: #666;
}

.jnBrandContent li a:hover {
  text-decoration: none;
  color: #008cd7;
}

/* details.html */

#jnProitem {
  float: left;
  display: inline;
  width: 312px;
  height: 560px;
}

#jnProitem .jqzoomWrap {
  float: left;
  position: relative;
  border: 1px solid #ccc;
  padding: 0;
  cursor: pointer;
}

#jnProitem span {
  clear: both;
  display: block;
  padding: 10px 0;
  text-align: center;
  width: 312px;
}

#jnProitem ul.imgList {
  height: 80px;
}

#jnProitem ul.imgList li {
  float: left;
  margin-right: 10px;
}

#jnProitem ul.imgList li img {
  width: 60px;
  height: 60px;
  padding: 1px;
  background: #eee;
  cursor: pointer;
}

#jnProitem ul.imgList li img:hover {
  padding: 1px;
  background: #999;
}

.tab {
  clear: both;
  float: left; 
  height: 230px;
  overflow: hidden;
  width: 310px; 
}

.tab .tab_menu {
  clear: both;
}

.tab .tab_menu li {
  float: left;
  text-align: center;
  margin-right: 5px;
  padding: 1px 6px;
  background: #f1f1f1;
  border: 1px solid #898989;
  border-bottom: 0;
  cursor: pointer;
}

.tab .tab_menu li.hover { 
  background:#DFDFDF;
}

.tab .tab_menu li.selected { 
  color:#FFF; 
  background:#6D84B4;
}

.tab .tab_box {
  clear: both;
  border: 1px solid #898989;
  padding: 3px;
}

.tab .hide {
  display: none;
}


#jnDetails {
  float: left;
  display: inline;
  width: 468px;
  overflow: hidden;
}

#jnDetails .jnProDetail {
  padding: 0 10px 10px;
}

#jnDetails .jnProDetailList li {
  width: 100%;
  float: left;
  line-height: 25px;
}

#jnDetails .jnProDetailList strong.del {
  color: #404040;
  font-size: 12px;
  text-decoration: line-through;
}

#jnDetails .jnProDetailList .tbDetailPrice strong {
  font-weight: 700;
  color: #FF5500;
  font: 24px Tahoma,Arial,Helvetica,sans-serif;
  padding-right: 5px;
  vertical-align: middle;
}

#jnDetails .jnProDetailList .color_change li, #jnDetails .jnProDetailList .pro_size li {
  float:left; 
  margin-right:10px; 
  width:40px;
  cursor:pointer; 
} 

#jnDetails .jnProDetailList .color_change img {
  width: 30px;
  height: 30px;
  padding:1px; 
  background:#EEE;
  border:1px solid #BBB;
}

#jnDetails .jnProDetailList .color_change img:hover, #jnDetails .jnProDetailList .color_change img.hover { 
  border:1px solid #f60;
}

#jnDetails .jnProDetailList .pro_size li {
  display: block;
  margin-right:6px;
  width: 30px;
  height: 30px;
  line-height: 30px;
  border: 1px solid #AAA;
  text-align: center;
  overflow: hidden;
}

#jnDetails .jnProDetailList .pro_size li.cur {
  border: 1px solid #AAA;
  background-color: #f60;
}

/* rating css */

.rating {
  width: 80px;
  height: 16px;
  margin-bottom: 20px;
  overflow: hidden;
  padding: 0;
  list-style: none;
  clear: both;
  position: relative;
  background: url(../images/star-matrix.gif) no-repeat 0 0;
}

.nostar {background-position:0 0}
.onestar {background-position:0 -16px}
.twostar {background-position:0 -32px}
.threestar {background-position:0 -48px}
.fourstar {background-position:0 -64px}
.fivestar {background-position:0 -80px}

ul.rating li {
  float: left;
  text-indent: -9999px; 
  cursor: pointer;
}

ul.rating li a {
  position: absolute;
  left: 0;
  top: 0;
  width: 16px;
  height: 16px;
  text-decoration: none;
  z-index: 200;
}

ul.rating li.one a {left:0}
ul.rating li.two a {left:16px;}
ul.rating li.three a {left:32px;}
ul.rating li.four a {left:48px;}
ul.rating li.five a {left:64px;}

ul.rating li a:hover {
  z-index: 2;
  width: 80px;
  height: 16px;
  overflow: hidden;
  left: 0; 
  background: url(../images/star-matrix.gif) no-repeat 0 0
}

ul.rating li.one a:hover {background-position:0 -96px;}
ul.rating li.two a:hover {background-position:0 -112px;}
ul.rating li.three a:hover {background-position:0 -128px}
ul.rating li.four a:hover {background-position:0 -144px}
ul.rating li.five a:hover {background-position:0 -160px}

#footer {
  clear: both;
  width: 990px;
  margin: 0 auto;
  color: #666666;
  line-height: 60px;
  text-align: center;
}

.clearfix:after {
  content: ".";
  clear: both;
  height: 0;
  visibility: hidden;
  display: block;
}

/* tooltip */
#tooltip{
  position:absolute;
  border:1px solid #333;
  background:#f7f5d1;
  padding:1px;
  color:#333;
  display:none;
}

/* imgHover */
.imageMask {
  background-color: #fff; 
  filter: alpha(opacity=0);
  opacity: 0; 
  cursor: pointer;
}
.imageOver {
  background: url(../images/zoom.gif) no-repeat 50% 50%; 
  filter: alpha(opacity=60);
  opacity: 0.6; 
}

/* jquery zoom */
.zoomPad{
  position:relative;
  float:left;
  z-index:99;
  cursor:crosshair;
}
.zoomPreload{
   -moz-opacity:0.8;
   opacity: 0.8;
   filter: alpha(opacity = 80);
   color: #333;
   font-size: 12px;
   font-family: Tahoma;
   text-decoration: none;
   border: 1px solid #CCC;
   background-color: white;
   padding: 8px;
   text-align:center;
   background-image: url(../images/zoomloader.gif);
   background-repeat: no-repeat;
   background-position: 43px 30px;
   z-index:110;
   width:90px;
   height:43px;
   position:absolute;
   top:0px;
   left:0px;
    * width:100px;
    * height:49px;
}
.zoomPup{
  overflow:hidden;
  background-color: #FFF;
  -moz-opacity:0.6;
  opacity: 0.6;
  filter: alpha(opacity = 60);
  z-index:120;
  position:absolute;
  border:1px solid #CCC;
  z-index:101;
  cursor:crosshair;
}
.zoomOverlay{
  position:absolute;
  left:0px;
  top:0px;
  background:#FFF;
  /*opacity:0.5;*/
  z-index:5000;
  width:100%;
  height:100%;
  display:none;
    z-index:101;
}
.zoomWindow{
  position:absolute;
  left:110%;
  top:40px;
  background:#FFF;
  z-index:6000;
  height:auto;
  z-index:10000;
  z-index:110;
}
.zoomWrapper{
  position:relative;
  border:1px solid #999;
  z-index:110;
}
.zoomWrapperTitle{
  display:block;
  background:#999;
  color:#FFF;
  height:18px;
  line-height:18px;
  width:100%;
  overflow:hidden;
  text-align:center;
  font-size:12px;
  position:absolute;
  top:0px;
  left:0px;
  z-index:120;
  -moz-opacity:0.6;
  opacity: 0.6;
  filter: alpha(opacity = 60);
}
.zoomWrapperImage{
  display:block;
  position:relative;
  overflow:hidden;
  z-index:110;

}
.zoomWrapperImage img{
  border:0px;
  display:block;
  position:absolute;
  z-index:101;
}
.zoomIframe{
  z-index: -1;
  filter:alpha(opacity=0);
  -moz-opacity: 0.80;
  opacity: 0.80;
  position:absolute;
  display:block;
}



